<template>
    <div class="dialogs">
        <el-dialog
            title="插入栏 - 设置单元格格式"
            :visible.sync="PdialogVisible"
            :before-close="handleClose"
            >
            <span><i class="el-icon-question question"></i></span>
            <div class="middleBody">
                <div class="bodyLeft">
                    <span class="title">列 名称</span>
                    <input type="text">
                    <span class="title">列 分类</span>
                    <div class="culum">
    <!--                    <p><i class="el-icon-check"></i><span class="title">文字/数字</span></p>-->
                        <ul>
                            <li v-for="(item,index) in comlum" :key="index">
                                <i class="el-icon-check"></i><span class="name">{{item.name}}</span><span v-if="item.type" class="type">({{item.type}})</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="bodyRight">
                    <el-checkbox v-model="checked" class="titleOne">每个单元格允许多个联系人</el-checkbox>
                    <p class="title">联系人列表</p>
                    <input type="text" placeholder="请输入姓名或电子邮箱地址…">
                    <ul>
                        <li v-for="(item,index) in comlums" :key="index" >
                            <span>{{item.name}}({{item.tel}})</span>
                            <i class="el-icon-edit"></i>
                            <i class="el-icon-delete"></i>
                        </li>
                    </ul>
                    <el-checkbox v-model="checkeds" class="titleOne">仅限于添加的联系人</el-checkbox>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="close()" class="close">取 消</el-button>
            <el-button  @click="confirm()" class="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name:'insertss',
        data() {
            return {
                PdialogVisible: this.visible,
                checked: true,
                checkeds: true,
                comlum:[{
                    name:'联系人列表'
                },{
                    name:'日期'
                },{
                    name:'下拉菜单',
                    type:'单选'
                },{
                    name:'下拉菜单',
                    type:'多选'
                },{
                    name:'多选框'
                },{
                    name:'多选框'
                },{
                    name:'多选框'
                },{
                    name:'多选框'
                },{
                    name:'多选框'
                },{
                    name:'多选框'
                },{
                    name:'多选框'
                },{
                    name:'多选框'
                },{
                    name:'多选框'
                },{
                    name:'自动计算'
                }],
                comlums:[{
                    name:"沈毛",
                    tel:"2200ddc99554@gmail.com"
                },{
                    name:"习大大",
                    tel:"2200ddc99554@gmail.com"
                },{
                    name:"沈毛毛毛",
                    tel:"2200ddc99554@gmail.com"
                },{
                    name:"沈毛毛毛",
                    tel:"2200ddc99554@gmail.com"
                },{
                    name:"沈毛毛毛",
                    tel:"2200ddc99554@gmail.com"
                },{
                    name:"沈毛毛毛",
                    tel:"2200ddc99554@gmail.com"
                },{
                    name:"沈毛毛毛",
                    tel:"2200ddc99554@gmail.com"
                },{
                    name:"沈毛毛毛",
                    tel:"2200ddc99554@gmail.com"
                },{
                    name:"沈毛毛毛",
                    tel:"2200ddc99554@gmail.com"
                },]
            };
        },
        props:{
            visible:Boolean
        },
        watch:{
            visible:{
                handler:function(val,oldval){
                    if(val!=oldval){
                        this.$nextTick(()=>{
                            this.PdialogVisible=val
                        })
                    }
                },
                immediate:true,//关键
                deep:true
            },
        },
        mounted() {
            console.log(this.PdialogVisible)
        },
        methods: {
            handleClose(){
                this.close()
            },
            close(){
                this.PdialogVisible=false;
                this.$parent.closeDilogs();
            },
            confirm(){
                this.PdialogVisible=false;
                this.$parent.closeDilogs();
            }
        }
    };
</script>
<style lang="less" scoped>
    @import url('./css/inserts');
</style>
<style lang="less">
    .dialogs{
        width: 100%;
        height: 100%;
        .el-dialog{
            width:462px;
            height:426px;
            background:rgba(255,255,255,1);
            border-radius:2px;
            .el-dialog__header{
                padding: 14px 14px 7px;
                .el-dialog__title{
                    line-height: 17px;
                    font-size: 16px;
                }
                .el-dialog__headerbtn{
                    right: 14px;
                    top: 13px;
                }
            }
            .el-dialog__body{
                padding: 20px 14px;
                padding-top: 0;
                .question{
                    position: absolute;
                    top: 16px;
                    right: 54px;
                }
                .bodyRight{
                    .titleOne{
                        margin-top: 13px;
                        .el-checkbox__label{
                            font-size:14px;
                            font-family:PingFangSC-Regular,PingFang SC;
                            font-weight:400;
                            color:rgba(50,54,58,1);
                            line-height:22px;
                        }
                    }
                }
            }
            .el-dialog__footer{
                padding-right: 20px;
                padding: 7px 14px 14px;
                button{
                    width:74px;
                    height:28px;
                    border-radius:6px;
                    font-size:12px;
                    line-height: 12px;
                    font-family:PingFangSC-Regular,PingFang SC;
                    font-weight:400;
                    letter-spacing:1px;
                    padding: 8px 14px;

                }
                .confirm{
                    background: #6D7A94;
                    color:rgba(255,255,255,1);
                    margin-left: 24px;
                }
                .close{
                    background: white;
                    color:rgba(50,54,58,1);
                }
            }

        }
    }

</style>
